<template>
    <div class="detail">
        <el-card class="box-card">
            <!--卡片的顶部-->
            <template #header>
                <div class="card-header">
                    <span>挂号详情</span>
                </div>
            </template>
            <!--卡片身体部分的-->
            <div class="body">
                <!--左侧标签-->
                <el-tag type="success">
                    <div class="tag">
                        <span class="select"><img src="@/assets/正确.png" alt=""></span>
                        <span>{{ order.param?.orderStatusString }}</span>
                    </div>
                </el-tag>
                <!--右侧二维码-->
                <div class="right">
                    <img src="@/assets/code.png" alt="">
                    <div class="text">
                        <p>微信扫码关注“北京114预约挂号”</p>
                        <p>“快速预约挂号”</p>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="footer">
                    <div class="left">
                        <el-descriptions
                            class="margin-top"
                            :column="1"
                            border
                        >
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        就诊人信息
                                    </div>
                                </template>
                                {{ order.patientName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        就诊日期
                                    </div>
                                </template>
                                {{ order.reserveDate }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        就诊医院
                                    </div>
                                </template>
                                {{ order.hosname }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        就诊人科室
                                    </div>
                                </template>
                                {{ order.depname }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        医生职称
                                    </div>
                                </template>
                                {{ order.title }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        医事服务费
                                    </div>
                                </template>
                                <span style="color: red">{{ order.amount }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        订单号
                                    </div>
                                </template>
                                {{ order.outTradeNo }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        挂号时间
                                    </div>
                                </template>
                                {{ order.createTime }}
                            </el-descriptions-item>
                        </el-descriptions>
                        <div class="btn" v-if="order.orderStatus ===0||order.orderStatus===1">
                            <el-popconfirm title="确定取消吗？" @confirm="cancelOrder">
                                <template #reference>
                                    <el-button type="primary">取消订单</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button type="primary" v-if="order.orderStatus ===0" @click="showDialog">支付</el-button>
                        </div>
                    </div>
                    <div class="right">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>注意事项</span>
                                </div>
                            </template>
                            <p>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
                            <p style="color: red">2、【取号】就诊当天需在{{order.fetchTime }}前在医院取号，未取号视为爽约，该号不退不换；</p>
                            <p style="color: red">3、【退号】在{{ order.quitTime }}前可在线退号 ，逾期将不可办理退号退费；</p>
                            <p>4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；</p>
                            <p>5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                        </el-card>
                    </div>
                </div>
            </template>
        </el-card>
        <!--  点击支付后弹出对话框  -->
        <el-dialog v-model="dialogTableVisible" title="微信支付" width="400" @close="closeDialog">
            <div class="code">
                <img :src="imgUrl" alt="">
                <p>请使用微信扫码支付</p>
                <p>扫一扫支付订单</p>
            </div>
            <template #footer>
                <el-button type="primary" @click="closeDialog">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="Detail">
    import {onMounted, ref} from "vue";
    import {useRoute} from "vue-router";
    import {reqOrderDetail, reqCancelOrder,reqQrcode,reqPayStatus} from "@/api/user";
    import type {OrderInfoResponseData,QRCodeResponseData,PayInfo} from "@/api/user/type";
    import {ElMessage} from "element-plus";
    // 生成二维码插件
    import QRcode from 'qrcode'

    //存储二维码路径
    let imgUrl = ref<string>('');
    let order = ref<any>({});
    let $route = useRoute();
    // 存储定时器引用
    let timer:any = ref()

    //控制对话框显示与隐藏
    const dialogTableVisible = ref<boolean>(false);
    const showDialog =async () => {
        dialogTableVisible.value = true;
        // 获取支付需要的二维码
        let res:QRCodeResponseData = await reqQrcode(<string>$route.query.orderId);
        // 根据服务器返回的二维码字符串生成二维码
        imgUrl.value = await QRcode.toDataURL(res.data.codeUrl)
        // 定时器查询订单的支付状态
        timer.value = setInterval(async () => {
            // 查询订单支付状态
            let res:PayInfo = await reqPayStatus(<string>$route.query.orderId);
            // 支付成功
            if(res.data){
                dialogTableVisible.value = false;
                ElMessage({
                    message: '支付成功',
                    type: 'success'
                });
                clearInterval(timer.value);
                // 再次获取订单详情
                await getOrderInfo();
            }
        }, 2000)
    }
    // 关闭对话框
    const closeDialog = () =>{
        clearInterval(timer.value);
        dialogTableVisible.value = false;
    }

    onMounted(() => {
        getOrderInfo();
    });
    //获取订单详情
    const getOrderInfo = async () => {
        let res: OrderInfoResponseData = await reqOrderDetail(<string>$route.query.orderId);
        if (res.code === 200) {
            order.value = res.data;
        } else {
            return Promise.reject(new Error(res.message))
        }
    }

    // 取消订单
    const cancelOrder = async () => {
        try {
            await reqCancelOrder(<string>$route.query.orderId);
            alert('取消订单成功');
            // 刷新订单状态
            await getOrderInfo();
        } catch (error) {
            ElMessage({
                message: '取消订单失败',
                type: 'error'
            })
        }
    }
</script>

<style scoped>
.detail {
    .box-card {
        .body {
            display: flex;
            justify-content: space-between;

            .tag {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .select {
                margin-right: 5px;
            }

            .right {
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                    margin: 0;
                    padding: 0;
                    width: 40px;
                    height: 40px;
                }

                p {
                    margin: 0 0 0 10px;
                    padding: 0;
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }

        .footer {
            display: flex;

            .left {
                flex: 4;

                .btn {
                    display: flex;
                    margin: 20px;
                }
            }

            .right {
                margin: 0 40px;
                flex: 6;

                p {
                    line-height: 20px;
                    margin: 0;
                }
            }
        }
    }
    ::v-deep(.el-dialog__body){
        border-top: 1px solid #7f7f7f;
        border-bottom: 1px solid #7f7f7f;
    }
    .code{
        display: flex;
        flex-direction: column;
        align-items: center;
        p{
            margin: 0;
            line-height: 30px;
        }
        img{
            width: 200px;
        }
    }
}
</style>